<template>
	<view class="container">
		<!-- #ifndef APP-PLUS -->
		<view class="header">
			<view class="headerLeft">
				<uni-icons type="bars" color="white" size="20"></uni-icons>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view class="scroll-view-item_H" :class="current===0?'fontSize':''" @click="headerNav(0)">武汉</view>
				<view class="scroll-view-item_H" :class="current===1?'fontSize':''" @click="headerNav(1)">经验</view>
				<view class="scroll-view-item_H" :class="current===2?'fontSize':''" @click="headerNav(2)">关注</view>
				<view class="scroll-view-item_H" :class="current===3?'fontSize':''" @click="headerNav(3)">商城</view>
				<view class="scroll-view-item_H" :class="current===4?'fontSize':''" @click="headerNav(4)">推荐</view>
			</scroll-view>
			<view class="headerRight" @click="goSearch">
				<uni-icons type="search" color="white" size="20"></uni-icons>
			</view>
		</view>
		<!-- #endif -->

		<view class="content">
			<video id="video" loop preload :controls="false"
					:muted="true" :show-fullscreen-btn="false" :show-progress="false"
					:show-play-btn="false" :show-center-play-btn="false"
					:enable-progress-gesture="false" :mobilenet-hint-type="0" class="video" :src="videoSrc" @click="touchVideo"></video>
		</view>
		
		<!-- #ifndef APP-PLUS -->
		<listOpreator :isShowList="isShowList" />
		<!-- #endif -->
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted
	} from "vue";
	import { onLoad,onShow } from '@dcloudio/uni-app'
	// #ifndef APP-PLUS
	import listOpreator from '../../components/ListOpreator.vue'
	components: {
		listOpreator
	}
	// #endif
	let videoContext=ref < object > (uni.createVideoContext('video',this))
	let isShowList = ref < boolean > (true)
	let current = ref < number > (4)
	let isVideoPlay=ref<boolean>(true)
	let videoSrc =ref < string > ('https://static.sumer.work/video/sumer-app/df057044ac4016528.mp4')
	
	onMounted(() => {
		videoContext.value.play()
	})
	
	onLoad(()=>{
		//#ifdef APP_PLUS
		const subNvue=uni.getSubNVueById('subIndex');
		subNvue.show()
		//#endif
	})
	
	onShow(()=>{
	})
	
	const goSearch: Function = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	const touchVideo=()=>{
		console.log('touch')
		if(isVideoPlay.value){
			videoContext.value.pause()
			isVideoPlay.value=false
		}else{
			videoContext.value.play()
			isVideoPlay.value=true
		}
	}

	const headerNav = (number: number) => {
		current.value = number
	}
</script>

<style scoped lang="scss">
	.container {
		width: 750rpx;
		height: 100vh;
		background-color: black;
	}

	.header {
		font-size: 30rpx;
		line-height: 100rpx;
		color: white;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 10000;

		.scroll-view_H {
			white-space: nowrap;
			width: 525rpx;
			margin: 0 12.5rpx;
			text-align: center;
		}

		.scroll-view-item_H {
			display: inline-block;
			width: 131.25rpx;
			text-align: center;
			color: #ffffff;
		}

		.headerLeft{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			text-align: center;
			
			width:100rpx;
			height:100rpx;
			line-height: 100rpx;
		}
		.headerRight {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			text-align: center;
			
			width:100rpx;
			height:100rpx;
			line-height: 100rpx;
		}
	}

	.content {
		width: 750rpx;
		height:100vh;
		position: relative;
		z-index: -1;
	}


	.video {
		width: 750rpx;
		height:100vh;
	}

	.fontSize {
		font-weight: 1000;
	}
</style>
